<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div_mod" onmouseenter="//enter()" onmouseleave="//leave()" onmousemove="//move()" style="height: 300px;width: 300px;border: 1px solid red;">
			
		</div>
	</body>

	<script type="text/javascript">
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		
		//1
		// function enter(){console.log('进入块状1')}
		// function leave(){console.log('离开块状1')}
		// function move(){console.log('在块状内移动1')}
		
		//2
		// document.getElementById('div_mod').onmouseenter=function(){console.log('进入块状2')}
		// document.getElementById('div_mod').onmouseleave=function(){console.log('离开块状2')}
		// document.getElementById('div_mod').onmousemove=function(){console.log('在块状内移动2')}
		
		//3
		document.getElementById('div_mod').addEventListener('mouseenter',function(){console.log('进入块状3')})
		document.getElementById('div_mod').addEventListener('mouseleave',function(){console.log('离开块状3')})
		document.getElementById('div_mod').addEventListener('mousemove',function(){console.log('在块状内移动3')})
	</script>
</html>
